<template>
  <div class="campus-map">
    <div class="map-title">学校地图（楼宇情况）</div>
    <div class="map-container">
      <!-- 建筑物列表 -->
      <div class="building-list">
        <div 
          v-for="building in buildingList" 
          :key="building.id"
          class="building-item"
          :class="building.status"
          @click="handleBuildingClick(building)"
        >
          <div class="building-name">{{ building.name }}</div>
          <div class="building-info">
            <span class="info-item">设备: {{ building.deviceCount }}台</span>
            <span class="info-item">能耗: {{ building.energyConsumption }}kWh</span>
            <span class="info-item status" :class="building.status">{{ getStatusText(building.status) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { BuildingStatus } from '../types'

interface Props {
  buildingList: BuildingStatus[]
}

interface Emits {
  (e: 'buildingClick', building: BuildingStatus): void
}

const { buildingList } = defineProps<Props>()
const emit = defineEmits<Emits>()

const handleBuildingClick = (building: BuildingStatus) => {
  emit('buildingClick', building)
}

const getStatusText = (status: BuildingStatus['status']) => {
  const statusMap = {
    'online': '在线',
    'maintenance': '维护',
    'offline': '离线'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped>
.campus-map {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.map-title {
  color: #00d4ff;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.map-container {
  flex: 1;
  overflow-y: auto;
  padding-top: 35px; /* 为标题留出空间 */
}

.building-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.building-item {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 80px;
}

.building-item:hover {
  background: rgba(0, 212, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.building-item.online {
  border-color: rgba(103, 224, 227, 0.3);
}

.building-item.maintenance {
  border-color: rgba(255, 217, 61, 0.3);
}

.building-item.offline {
  border-color: rgba(128, 128, 128, 0.3);
}

.building-name {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.building-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-item {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
}

.info-item.status.online {
  color: #67e0e3;
}

.info-item.status.maintenance {
  color: #ffd93d;
}

.info-item.status.offline {
  color: #888;
}
</style>
